<template>
    <!-- 标签栏 -->
    <Tabs class="tabs" :tabs="tabs"></Tabs>
    <router-view v-slot="{ Component }">
            <keep-alive>
                <component :is="Component" />
            </keep-alive>
    </router-view>
    <!-- <router-view></router-view> -->
</template>

<script setup lang="ts">
const tabs = [
  {
    label: '个性推荐',
    name: 'recommend',
    path: '/findMusic/recommend',
  },
  {
    label: '歌单',
    name: 'songList',
    path: '/findMusic/songList',
  },
  {
    label: '排行榜',
    name: 'rank',
    path: '/findMusic/rank',
  },
  {
    label: '歌手',
    name: 'singer',
    path: '/findMusic/singer',
  },
]
</script>

<style scoped lang="less">
 .tabs {
    display: block;
    margin: 20px 30px;
  }

</style>